<template>
<div class="xdsettabal">
            <div class="input_a">
        <span>企业位置<i>*</i></span>
        <span @click="gomap">点击打开地图选择坐标</span>
      </div>
      <div class="input_flex">
        <span>
          <p>企业经度 <i>*</i></p> <el-input v-model="from.lng"></el-input>
        </span>
        <span>
          <p>企业纬度 <i>*</i></p><el-input v-model="from.lat"></el-input>
        </span>
      </div>
    <XDTableComp :config="config" v-model="tableData"></XDTableComp>


    
       <div v-show="showmap" class="map_datal">
           <div class="map_set">
                     <div class="map_sdk" id="map_datal"></div>

      <div>
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="qux">取消</el-button>
      </div>

           </div>
 
    </div>

     </div>

</template>

<style></style>
<script>
    export default {
        data() {
            return {
                  showmap: false,
                config:
                [
                    {
                  type:"index",
                  addEditHidden:true,
                  hidden: true
                    },
                    {
                    prop: 'x',
                    label: '经度'
                },
                {
                    prop: 'y',
                    label: '纬度'
                },
                // {
                //     prop: '',
                //     label: '操作',
                //     type: 'operation',
                //     edit: false,
                //     delete: false
                // }
                ],
                tableData: [
                    
                ],
                from:{
                 lng: "",
                 lat: "",
                 mineBorder:""   
                },
                backDate:{}
                 
            }
        },
watch: {

   config:{
           　handler(newValue, oldValue) {
                    console.log(newValue,oldValue);
　　　　},
　　　　deep: true
   },

    "tableData":function(){
        
    
                 this.$nextTick(()=>{
                  let good = ""
            
            this.tableData.map((item)=>{
                good+= `${item.x},${item.y};`
            })

             
            this.from.mineBorder = good.substring(0, good.length - 1)

          
           let obj = this.from
          
          this.$store.commit('slotData',obj)

           
            })


    },
  
    "$store.state.mapDate":function () {
       
        let backList = []
        let objList =[]
         this.backDate = {...this.$store.state.mapDate}
         if(this.backDate.mineBorder!=null){
               backList = this.backDate.mineBorder.split(";")
             
             backList.map((item)=>{
                  let obj = {
                      x:"",
                      y:""
                  }
             objList = item.split(",")
            
              obj.x = objList[0]
              obj.y = objList[1]
              this.tableData.push(obj)
             })  

         }
                
         this.from.lng = this.backDate.lng
         this.from.lat = this.backDate.lat




    }
    


},

 
   
    
         
        

        methods: {
                //打开地图
    gomap() {
      this.showmap = true;
      this.loginMap();
    },

    //关闭地图
    onSubmit() {
      this.showmap = false;
    },

       qux() {
      this.showmap = false;

    //   this.from.lng = "";
    //   this.from.lat = "";
    },

    //地图
    loginMap() {
      var map = new BMap.Map("map_datal",{
          mapType:BMAP_HYBRID_MAP

      });
      map.centerAndZoom(new BMap.Point(116.122523, 24.288578), 15);
      map.enableScrollWheelZoom(true);
      let that = this;
      map.addEventListener("click", function(e) {
          map.clearOverlays();
        that.from.lng = e.point.lng;
        that.from.lat = e.point.lat;
      var marker1 = new BMap.Marker(new BMap.Point(that.from.lng, that.from.lat));
      map.addOverlay(marker1);
    
      });
    },
        },
     
        
    }
</script>

<style lang="scss" scoped>
.xdsettabal{
    position: relative;
    width: 100%;
}

    .input_a{
      width: 100%;
      display: flex;
      font-size: 16px;
      color: #333;
      margin-bottom: 20px;
      span:nth-child(1){
        
        i{
          color: red;
        }
      }
      span:nth-child(2){
        display: inline-block;
        margin-left: 10px;
        cursor: pointer;
      }
    }
    .input_flex{
      width: 100%;
      display: flex;
       margin-bottom: 20px;
      span{
        display: flex;
        p{
          font-size: 16px;
          color: #333;
          margin-right: 10px;
          white-space: nowrap;
          i{
            color: red;
          }
        }
        
      }
    }
    .input_sater{
      width: 100%;
      display: flex;
      span{
        font-size: 16px;
        color: #333;
        
        i{
          color:red;
          margin-right: 10px;
        }
      }
    }

     


  .map_datal {
    width: 100%;
    height: 100%;
    position: fixed;
     top: 0;
     left: 0;
    background-color: #fff;

    z-index: 999;
    .map_set{
        width: 100%;
        height: 100%;
         
         .map_sdk {
      width: 50%;
      height: 80%;
      margin-bottom: 20px;
    }
    }
  
  }
</style>

